import React, { Component } from 'react';
import ReactDom from 'react-dom';
import {connect} from 'react-redux';
import Avaupload from './avaupload.js';
import {Layout} from 'element-react';
import './personMsg.css';
import {Gender} from './gender.js'
import {Department} from './department.js'
import {Position} from './position.js'
import {Phone} from './phone.js'
import {Call} from './call.js'
import {Email} from './email.js'
import {Wagecard} from './wageCard.js'
import {Bank} from './bank.js'
import IData from './personMsgData'

class PersonMsg extends Component {
    constructor(props){
        super(props);
        this.state={
            data:{
                clientNum:IData.cid,
                enterpriseName :IData.firmName,
                username:IData.userName,
                role:IData.role,
                phone:IData.mobileNo
            }
        }
    }

    render() {
        return (
           <div className="bg">
               <Layout.Row >
                   <Layout.Row>
                      <Layout.Col span="24">
                          <div className="label">企业信息</div>
                      </Layout.Col>
                   </Layout.Row>
                   <Layout.Row>
                       <Layout.Col span="12">
                           <div className="zy">客户号</div>
                       </Layout.Col>
                       <Layout.Col span="12">
                           <div className="zy">{this.state.data.clientNum}</div>
                       </Layout.Col>
                   </Layout.Row>
                   <Layout.Row>
                       <Layout.Col span="12">
                           <div className="zy">企业名称</div>
                       </Layout.Col>
                       <Layout.Col span="12">
                           <div className="zy">{this.state.data.enterpriseName}</div>
                       </Layout.Col>
                   </Layout.Row>
                   <Layout.Row>
                       <Layout.Col span="24">
                           <div className="label">个人信息</div>
                       </Layout.Col>
                   </Layout.Row>
                   <Layout.Row className="_avater">
                       <Layout.Col span="12">
                           <div className="">头像</div>
                       </Layout.Col>
                       <Layout.Col span="12">
                           <div className="avastyle">
                               <Avaupload className=""/>
                           </div>
                       </Layout.Col>
                    </Layout.Row>
                    <Layout.Row>
                        <Layout.Col span="12">
                            <div className="zy">姓名</div>
                        </Layout.Col>
                        <Layout.Col span="12">
                            <div className="zy">{this.state.data.username}</div>
                        </Layout.Col>
                    </Layout.Row>
                    <Layout.Row>
                        <Layout.Col span="12">
                            <div className="zy">角色</div>
                        </Layout.Col>
                        <Layout.Col span="12">
                            <div className="zy">{this.state.data.role}</div>
                        </Layout.Col>
                    </Layout.Row>
                    <Layout.Row>
                        <Layout.Col span="12">
                            <div className="zy">性别</div>
                        </Layout.Col>
                        <Layout.Col span="12">
                            <Gender />
                        </Layout.Col>
                    </Layout.Row>
                    <Layout.Row>
                        <Layout.Col span="12">
                            <div className="zy">部门</div>
                        </Layout.Col>
                        <Layout.Col span="12">
                            <Department/>
                        </Layout.Col>
                    </Layout.Row>
                    <Layout.Row>
                        <Layout.Col span="12">
                            <div className="zy">职位</div>
                        </Layout.Col>
                        <Layout.Col span="12">
                            <Position/>
                        </Layout.Col>
                    </Layout.Row>
                    <Layout.Row>
                         <Layout.Col span="12">
                             <div className="zy">手机号</div>
                         </Layout.Col>
                         <Layout.Col span="12">
                             <div className="zy">{this.state.data.phone}</div>
                         </Layout.Col>
                    </Layout.Row>
                       <Layout.Row>
                           <Layout.Col span="12">
                               <div className="zy">电话</div>
                           </Layout.Col>
                           <Layout.Col span="12">
                               <Call/>
                           </Layout.Col>
                       </Layout.Row>
                       <Layout.Row>
                           <Layout.Col span="12">
                               <div className="zy">邮箱</div>
                           </Layout.Col>
                           <Layout.Col span="12">
                              <Email/>
                           </Layout.Col>
                       </Layout.Row>
                       <Layout.Row>
                           <Layout.Col span="12">
                               <div className="zy">工资卡号</div>
                           </Layout.Col>
                           <Layout.Col span="12">
                               <Wagecard/>
                           </Layout.Col>
                       </Layout.Row>
                       <Layout.Row>
                           <Layout.Col span="12">
                               <div className="zy">归属银行</div>
                           </Layout.Col>
                           <Layout.Col span="12">
                               <Bank/>
                           </Layout.Col>
                       </Layout.Row>
               </Layout.Row>
           </div>
        )
    }
}
export default connect()(PersonMsg);